<template>
	<!-- h5页面显示 没有裁剪 -->
	<view class="page page-fill">
		<!-- 展示的图片 -->
		<view class="pending-wapper">
			<image id="face" :src="tempFace" class="pending-face" mode="scaleToFill"></image>
		</view>
		<view class="notice">
			<view class="notice-words">
				* 请从相册中选择等比宽高的图片噢~
			</view>
		</view>
		<view class="footer-opertor">
			<view class="opertor-words" @click="changePendingFace">
				重新选择
			</view>
			<view class="opertor-words" @click="upload">
				确认上传
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tempFace: "" //展示的图片
			}
		},
		//获取连接跳转过来的url临时路径
		onLoad(params) {
			var tempFilePath = params.tempFilePath;
			this.tempFace = tempFilePath;
		},
		methods: {
			// 重新选择头像 套路还是不变 选择图片 默认原图 相册 保存临近路径 进展示
			changePendingFace() {
				var me = this;
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					sourceType: ["album"],
					success(res) {
						// 获得临时路径
						var tempFilePath = res.tempFilePaths[0];
						me.tempFace = tempFilePath;
					}
				})
			},
			//确定上传图片
			upload() {
				var me = this;
				var globalUser = me.getGlobalUser("globalUser"); 
				//获取用户信息 因为上传新的图片需要 更新数据库 和本地存储并实现页面跳转
						//加一个loaidn记得关闭
				uni.showLoading({
					mask: true,
					title: "上传中，请稍后"
				});
				//调用paip实现方法 得到的返回字符串 记得要转成json对象 将本地资源上传到开发者服务器
				uni.uploadFile({
					url: me.serverUrl + "/user/uploadFace?userId=" + globalUser.id, //开发者服务器 url
					filePath: me.tempFace, //要上传文件资源的路径。就是拿到的临时路径
					name: "file",  //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容	 跟请求参数一致
					header: {  //修改用户数据 需要携带id 和toekn 用户信息也存在id 或者openid的
						"headerUserId": globalUser.id,
						"headerUserToken": globalUser.userUniqueToken
					},
					success(res) {  //上传成执行的回调
						// debugger;
						var resDataStr = res.data;
						// console.log(typeof(resDataStr));
						var resData = JSON.parse(resDataStr); //把字符串转成json对象 
						// console.log(typeof(resData));
						if (resData.status == 200) {  //状态码200 存储本地 和返回上一级页面 
							// 获得最新的用户数据
							var userInfo = resData.data;
							uni.setStorageSync("globalUser", userInfo);
							uni.navigateBack({
								delta: 1
							})
						} else if (resData.status == 502 || resData.status == 500) {  //请求失败不然提示用户信息
							uni.showToast({
								title: res.data.msg,
								image: "../../static/icos/error.png",
								duration: 2000
							})
						}
					},
					complete() {  //成功和失败都会执行的回调 关闭loadin
						uni.hideLoading();
					}
				});

			}
		}
	}
</script>

<style>
	/* 页面铺满屏幕 */
	.page-fill {
		width: 100%;
		height: 100%;
		position: absolute;
		background: black;
	}

	.pending-wapper {
		display: flex;
		flex-direction: row;
		justify-content: center;

		margin-top: 40upx;
	}

	.pending-face {
		width: 600upx;
		height: 600upx;
	}

	.notice {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.notice-words {
		color: gray;
		font-size: 13px;
		margin-top: 30upx;
		width: 600upx;
	}

	/* 底部操作 start */
	.footer-opertor {
		position: fixed;
		bottom: 0;

		border-top: #515050 solid 1px;
		width: 100%;

		display: flex;
		flex-direction: row;
		justify-content: space-between;

		padding: 30upx;
	}

	.opertor-words {
		color: #e8e5e5;
		font-size: 16px;
		width: 200upx;
	}

	/* 底部操作 end */
</style>
